import React from 'react';
import {Input, Form, Row, Col, Select} from 'antd';

import RCModal from '@components/modal/index.jsx';
import {partyBranch, REG} from '@assets/config/global.js';

import './scss/parter_heart_modal.scss';

const FormItem = Form.Item;
const Option = Select.Option;

class HeartCadreModal extends React.Component {

    componentDidMount() {
        this.props.form.validateFields();
    }

    // 判断是否可以提交
    hasErrors(fieldsError) {
        let disabled = Object.keys(fieldsError).some(field => fieldsError[field]);
        return disabled;
    }

    // 点击提交
    submitForm() {
        let formInfo = this.props.form.getFieldsValue();
        this.props.submitForm(formInfo);
        this.props.form.resetFields();
    }

    // 取消关闭按钮
    onCancel() {
        this.props.form.resetFields();
        this.props.cancelForm();
    }

    render() {

        let {modalVisible = false, showFooter = false, data = {}} = this.props;

        const formItemLayout = {
            colon: false,
            labelCol: {
                span: 5
            },
            wrapperCol: {
                span: 19
            }
        };

        const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        const rules = [{required: true, message: '必填项！'}];

        const nameError = isFieldTouched('name') && getFieldError('name');// 户主姓名不能为空
        const phoneError = isFieldTouched('phone') && getFieldError('phone');// 联系电话不能为空
        const orgIdError = isFieldTouched('orgId') && getFieldError('orgId');//身份证号不能为空
        return (
            <RCModal
                visible={modalVisible}
                showFooter={showFooter}
                title='帮扶干部-基本信息'
                footerText={{okText: '提交'}}
                disabled={this.hasErrors(getFieldsError())}
                onOk={this.submitForm.bind(this)}
                onCancel={this.onCancel.bind(this)}
            >
                <Form layout='horizontal'>

                    <div className="parter-cadre-modal modal-content">
                        <Row>
                            <Col span={24}>
                                <FormItem label='姓名' {...formItemLayout}
                                          validateStatus={nameError ? 'error' : ''}
                                          help={nameError || ''}
                                >
                                    {
                                        getFieldDecorator('name', {initialValue: data.name || '', rules})(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        
                        <Row>
                            <Col span={24}>
                                <FormItem label='联系电话' {...formItemLayout}
                                          validateStatus={phoneError ? 'error' : ''}
                                          help={phoneError || ''}
                                >
                                     {
                                        getFieldDecorator('phone', {
                                            initialValue: data.phone || '',
                                            rules: [...rules, {pattern: RegExp(REG.phone, 'g'), message: '手机号输入有误！'}]
                                        })(
                                            <Input placeholder='请输入'/>
                                        )
                                    }
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={24}>
                                <FormItem label='所在党支部' {...formItemLayout}
                                          validateStatus={orgIdError ? 'error' : ''}
                                          help={orgIdError || ''}
                                >
                                     {
                                         getFieldDecorator('orgId', partyBranch[data.orgId] ? {initialValue: data.orgId, rules } : {rules})(
                                             <Select style={{width: '100%'}} placeholder='请选择' disabled>
                                                 {
                                                     Object.keys(partyBranch).map((item, index) => {
                                                         return (
                                                             <Option value={partyBranch[item].orgId} key={index}>{partyBranch[item].name}</Option>
                                                         )
                                                     })
                                                 }
                                             </Select>
                                         )
                                     }
                                </FormItem>
                            </Col>
                        </Row>
                        
                    </div>
                </Form>

            </RCModal>
        )
    }
}

HeartCadreModal = Form.create({})(HeartCadreModal);
export default HeartCadreModal;